<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站二级栏目展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #EEF2FF;
            --secondary: #EC4899;
            --dark: #1E293B;
            --light: #F8FAFC;
            --gray: #64748B;
            --light-gray: #F1F5F9;
            --border: #E2E8F0;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --radius: 10px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            padding-top: 3rem;
            padding-bottom: 4rem;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }
        
        .page-subtitle {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 栏目通用样式 */
        .secondary-section {
            margin-bottom: 4rem;
            padding: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        
        .section-header {
            margin-bottom: 1.75rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .section-actions {
            display: flex;
            gap: 0.75rem;
        }
        
        .view-all {
            font-size: 0.9rem;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            transition: all 0.2s ease;
        }
        
        .view-all:hover {
            color: #3B34D1;
            gap: 0.5rem;
        }
        
        /* 网格布局栏目 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        /* 列表布局栏目 */
        .list-layout {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        /* 大图布局栏目 */
        .featured-layout {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 1.5rem;
        }
        
        @media (max-width: 768px) {
            .featured-layout {
                grid-template-columns: 1fr;
            }
        }
        
        /* 双列布局栏目 */
        .two-column-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        
        @media (max-width: 768px) {
            .two-column-layout {
                grid-template-columns: 1fr;
            }
        }
        
        /* 卡片通用样式 */
        .content-card {
            border-radius: var(--radius);
            overflow: hidden;
            background-color: white;
            transition: all 0.3s ease;
        }
        
        .content-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }
        
        .card-image {
            width: 100%;
            object-fit: cover;
        }
        
        .card-content {
            padding: 1.25rem;
        }
        
        .card-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            transition: color 0.2s ease;
        }
        
        .content-card:hover .card-title {
            color: var(--primary);
        }
        
        .card-meta {
            color: var(--gray);
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.75rem;
        }
        
        .card-desc {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .card-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .card-stats {
            display: flex;
            gap: 1rem;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .card-stat {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        /* 列表项样式 */
        .list-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-radius: var(--radius);
            background-color: white;
            transition: all 0.3s ease;
            border: 1px solid var(--border);
        }
        
        .list-item:hover {
            background-color: var(--light-gray);
            border-color: transparent;
        }
        
        .list-item-image {
            width: 80px;
            height: 80px;
            border-radius: var(--radius);
            object-fit: cover;
            margin-right: 1.25rem;
            flex-shrink: 0;
        }
        
        .list-item-content {
            flex-grow: 1;
        }
        
        .list-item-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
            transition: color 0.2s ease;
        }
        
        .list-item:hover .list-item-title {
            color: var(--primary);
        }
        
        .list-item-desc {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        
        .list-item-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .list-item-action {
            flex-shrink: 0;
        }
        
        /* 标签云样式 */
        .tags-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            padding: 1rem 0;
        }
        
        .tag-item {
            background-color: var(--light-gray);
            color: var(--dark);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .tag-item:hover {
            background-color: var(--primary);
            color: white;
            transform: translateY(-2px);
        }
        
        .tag-count {
            background-color: rgba(0,0,0,0.1);
            color: inherit;
            padding: 0 0.4rem;
            border-radius: 10px;
            font-size: 0.75rem;
        }
        
        .tag-item:hover .tag-count {
            background-color: rgba(255,255,255,0.2);
        }
        
        /* 分类导航样式 */
        .categories-nav {
            display: flex;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            gap: 0.75rem;
        }
        
        .category-item {
            padding: 0.65rem 1.25rem;
            background-color: var(--light-gray);
            border-radius: 6px;
            font-size: 0.9rem;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .category-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        .category-item:hover:not(.active) {
            background-color: #E2E8F0;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .grid-layout {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.85rem;
            }
            
            .section-title {
                font-size: 1.35rem;
            }
            
            .list-item {
                flex-wrap: wrap;
            }
            
            .list-item-action {
                width: 100%;
                margin-top: 1rem;
            }
            
            .list-item-action .btn {
                width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .grid-layout {
                grid-template-columns: 1fr;
            }
            
            .section-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .section-actions {
                width: 100%;
                justify-content: space-between;
            }
            
            .list-item-image {
                width: 60px;
                height: 60px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">社交网站二级栏目展示</h1>
            <p class="page-subtitle">多种风格的二级栏目布局，满足不同内容的展示需求，提升用户浏览体验</p>
        </div>
        
        <!-- 1. 网格布局栏目 - 适合展示卡片式内容 -->
        <div class="secondary-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-th"></i> 热门话题</h2>
                <div class="section-actions">
                    <a href="#" class="view-all">查看全部 <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            
            <div class="grid-layout">
                <div class="content-card shadow-sm">
                    <img src="https://picsum.photos/seed/topic1/400/250" alt="科技峰会话题图片" class="card-image" height="180">
                    <div class="card-content">
                        <div class="card-meta">
                            <span><i class="fas fa-user"></i> 科技前沿</span>
                            <span><i class="fas fa-clock"></i> 2天前</span>
                        </div>
                        <h3 class="card-title">2023科技峰会亮点回顾</h3>
                        <p class="card-desc">今年的科技峰会上，人工智能和元宇宙成为焦点话题，多家科技巨头发布了最新研究成果。</p>
                        <div class="card-actions">
                            <div class="card-stats">
                                <div class="card-stat"><i class="far fa-comment"></i> 328</div>
                                <div class="card-stat"><i class="far fa-heart"></i> 1.2k</div>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">参与讨论</button>
                        </div>
                    </div>
                </div>
                
                <div class="content-card shadow-sm">
                    <img src="https://picsum.photos/seed/topic2/400/250" alt="旅行话题图片" class="card-image" height="180">
                    <div class="card-content">
                        <div class="card-meta">
                            <span><i class="fas fa-user"></i> 旅行者社区</span>
                            <span><i class="fas fa-clock"></i> 5天前</span>
                        </div>
                        <h3 class="card-title">小众旅行目的地推荐</h3>
                        <p class="card-desc">避开人潮，这些小众旅行地拥有不输热门景点的美景，适合喜欢安静旅行的你。</p>
                        <div class="card-actions">
                            <div class="card-stats">
                                <div class="card-stat"><i class="far fa-comment"></i> 512</div>
                                <div class="card-stat"><i class="far fa-heart"></i> 2.8k</div>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">参与讨论</button>
                        </div>
                    </div>
                </div>
                
                <div class="content-card shadow-sm">
                    <img src="https://picsum.photos/seed/topic3/400/250" alt="美食话题图片" class="card-image" height="180">
                    <div class="card-content">
                        <div class="card-meta">
                            <span><i class="fas fa-user"></i> 美食爱好者</span>
                            <span><i class="fas fa-clock"></i> 1周前</span>
                        </div>
                        <h3 class="card-title">夏日清爽食谱合集</h3>
                        <p class="card-desc">炎炎夏日，分享几道清爽可口的家常菜，简单易做，让你胃口大开。</p>
                        <div class="card-actions">
                            <div class="card-stats">
                                <div class="card-stat"><i class="far fa-comment"></i> 276</div>
                                <div class="card-stat"><i class="far fa-heart"></i> 1.5k</div>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">参与讨论</button>
                        </div>
                    </div>
                </div>
                
                <div class="content-card shadow-sm">
                    <img src="https://picsum.photos/seed/topic4/400/250" alt="健身话题图片" class="card-image" height="180">
                    <div class="card-content">
                        <div class="card-meta">
                            <span><i class="fas fa-user"></i> 健身达人</span>
                            <span><i class="fas fa-clock"></i> 3天前</span>
                        </div>
                        <h3 class="card-title">办公室简易健身动作</h3>
                        <p class="card-desc">长时间久坐对身体不好，这几个简易健身动作可以在办公室完成，缓解疲劳。</p>
                        <div class="card-actions">
                            <div class="card-stats">
                                <div class="card-stat"><i class="far fa-comment"></i> 189</div>
                                <div class="card-stat"><i class="far fa-heart"></i> 986</div>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">参与讨论</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 2. 列表布局栏目 - 适合展示信息流内容 -->
        <div class="secondary-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-list"></i> 最新动态</h2>
                <div class="section-actions">
                    <div class="categories-nav">
                        <div class="category-item active">全部</div>
                        <div class="category-item">关注</div>
                        <div class="category-item">热门</div>
                        <div class="category-item">推荐</div>
                    </div>
                    <a href="#" class="view-all">查看全部 <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            
            <div class="list-layout">
                <div class="list-item">
                    <img src="https://picsum.photos/seed/post1/200/200" alt="旅行照片" class="list-item-image">
                    <div class="list-item-content">
                        <h3 class="list-item-title">分享我的日本京都旅行vlog</h3>
                        <p class="list-item-desc">记录了京都的古寺、庭院和美食，感受日本传统文化的魅力。</p>
                        <div class="list-item-meta">
                            <span><i class="fas fa-user"></i> 旅行者小明</span>
                            <span><i class="fas fa-clock"></i> 2小时前</span>
                            <span><i class="far fa-comment"></i> 42</span>
                            <span><i class="far fa-heart"></i> 235</span>
                        </div>
                    </div>
                    <div class="list-item-action">
                        <button class="btn btn-sm btn-primary">点赞</button>
                    </div>
                </div>
                
                <div class="list-item">
                    <img src="https://picsum.photos/seed/post2/200/200" alt="美食照片" class="list-item-image">
                    <div class="list-item-content">
                        <h3 class="list-item-title">自制草莓慕斯蛋糕的秘诀</h3>
                        <p class="list-item-desc">不用烤箱也能做的美味甜点，口感丝滑，酸甜适中，适合夏日下午茶。</p>
                        <div class="list-item-meta">
                            <span><i class="fas fa-user"></i> 烘焙达人</span>
                            <span><i class="fas fa-clock"></i> 5小时前</span>
                            <span><i class="far fa-comment"></i> 78</span>
                            <span><i class="far fa-heart"></i> 356</span>
                        </div>
                    </div>
                    <div class="list-item-action">
                        <button class="btn btn-sm btn-primary">点赞</button>
                    </div>
                </div>
                
                <div class="list-item">
                    <img src="https://picsum.photos/seed/post3/200/200" alt="科技产品照片" class="list-item-image">
                    <div class="list-item-content">
                        <h3 class="list-item-title">最新款折叠屏手机上手体验</h3>
                        <p class="list-item-desc">从设计、性能到使用体验，全方位评测这款备受关注的折叠屏手机。</p>
                        <div class="list-item-meta">
                            <span><i class="fas fa-user"></i> 科技评测</span>
                            <span><i class="fas fa-clock"></i> 昨天</span>
                            <span><i class="far fa-comment"></i> 156</span>
                            <span><i class="far fa-heart"></i> 892</span>
                        </div>
                    </div>
                    <div class="list-item-action">
                        <button class="btn btn-sm btn-primary">点赞</button>
                    </div>
                </div>
                
                <div class="list-item">
                    <img src="https://picsum.photos/seed/post4/200/200" alt="读书分享照片" class="list-item-image">
                    <div class="list-item-content">
                        <h3 class="list-item-title">《原子习惯》读书笔记与实践</h3>
                        <p class="list-item-desc">分享这本书对我的影响，以及如何培养好习惯、戒除坏习惯的具体方法。</p>
                        <div class="list-item-meta">
                            <span><i class="fas fa-user"></i> 爱读书的人</span>
                            <span><i class="fas fa-clock"></i> 3天前</span>
                            <span><i class="far fa-comment"></i> 93</span>
                            <span><i class="far fa-heart"></i> 421</span>
                        </div>
                    </div>
                    <div class="list-item-action">
                        <button class="btn btn-sm btn-primary">点赞</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 3. 大图布局栏目 - 适合突出展示重点内容 -->
        <div class="secondary-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-star"></i> 精选内容</h2>
                <div class="section-actions">
                    <a href="#" class="view-all">更多精选 <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            
            <div class="featured-layout">
                <!-- 主要内容 -->
                <div class="content-card shadow-sm">
                    <img src="https://picsum.photos/seed/featured/800/500" alt="精选内容图片" class="card-image" height="300">
                    <div class="card-content">
                        <div class="card-meta">
                            <span><i class="fas fa-user"></i> 生活美学</span>
                            <span><i class="fas fa-clock"></i> 1周前</span>
                            <span><i class="fas fa-tags"></i> 生活方式</span>
                        </div>
                        <h3 class="card-title">极简主义生活指南：如何断舍离并找到真正重要的东西</h3>
                        <p class="card-desc">在这个物质丰富的时代，极简主义生活方式越来越受欢迎。本文分享如何通过断舍离，减少物质依赖，专注于真正重要的事物，提升生活质量和幸福感。从整理家居到数字极简，全方位实践极简主义。</p>
                        <div class="card-actions">
                            <div class="card-stats">
                                <div class="card-stat"><i class="far fa-eye"></i> 12.5k</div>
                                <div class="card-stat"><i class="far fa-comment"></i> 487</div>
                                <div class="card-stat"><i class="far fa-heart"></i> 5.2k</div>
                            </div>
                            <button class="btn btn-primary">阅读全文</button>
                        </div>
                    </div>
                </div>
                
                <!-- 侧边推荐 -->
                <div class="d-flex flex-column gap-1.5rem">
                    <div class="content-card shadow-sm">
                        <img src="https://picsum.photos/seed/side1/400/250" alt="推荐内容图片" class="card-image" height="160">
                        <div class="card-content">
                            <h3 class="card-title">早晨高效工作的5个习惯</h3>
                            <div class="card-meta">
                                <span><i class="fas fa-clock"></i> 5天前</span>
                            </div>
                            <div class="card-stats">
                                <div class="card-stat"><i class="far fa-eye"></i> 3.2k</div>
                                <div class="card-stat"><i class="far fa-heart"></i> 1.8k</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="content-card shadow-sm">
                        <img src="https://picsum.photos/seed/side2/400/250" alt="推荐内容图片" class="card-image" height="160">
                        <div class="card-content">
                            <h3 class="card-title">城市中的隐藏花园：寻找都市绿洲</h3>
                            <div class="card-meta">
                                <span><i class="fas fa-clock"></i> 10天前</span>
                            </div>
                            <div class="card-stats">
                                <div class="card-stat"><i class="far fa-eye"></i> 2.8k</div>
                                <div class="card-stat"><i class="far fa-heart"></i> 1.5k</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="content-card shadow-sm">
                        <img src="https://picsum.photos/seed/side3/400/250" alt="推荐内容图片" class="card-image" height="160">
                        <div class="card-content">
                            <h3 class="card-title">从零开始学摄影：手机摄影进阶技巧</h3>
                            <div class="card-meta">
                                <span><i class="fas fa-clock"></i> 2周前</span>
                            </div>
                            <div class="card-stats">
                                <div class="card-stat"><i class="far fa-eye"></i> 8.7k</div>
                                <div class="card-stat"><i class="far fa-heart"></i> 4.3k</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 4. 双列布局栏目 - 适合对比或分类展示 -->
        <div class="secondary-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-columns"></i> 社区活动</h2>
                <div class="section-actions">
                    <a href="#" class="view-all">全部活动 <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            
            <div class="two-column-layout">
                <!-- 左侧：线上活动 -->
                <div>
                    <h3 class="mb-3 text-primary"><i class="fas fa-laptop"></i> 线上活动</h3>
                    <div class="list-layout">
                        <div class="list-item">
                            <img src="https://picsum.photos/seed/online1/200/200" alt="线上讲座图片" class="list-item-image">
                            <div class="list-item-content">
                                <h3 class="list-item-title">设计思维工作坊：创新解决问题的方法</h3>
                                <p class="list-item-desc">通过设计思维的五个阶段，学习如何创新地解决工作和生活中的问题。</p>
                                <div class="list-item-meta">
                                    <span><i class="fas fa-calendar"></i> 6月15日 20:00</span>
                                    <span><i class="fas fa-user"></i> 328人报名</span>
                                </div>
                            </div>
                            <div class="list-item-action">
                                <button class="btn btn-sm btn-primary">报名</button>
                            </div>
                        </div>
                        
                        <div class="list-item">
                            <img src="https://picsum.photos/seed/online2/200/200" alt="线上分享图片" class="list-item-image">
                            <div class="list-item-content">
                                <h3 class="list-item-title">作家分享会：如何开始你的写作之旅</h3>
                                <p class="list-item-desc">知名作家分享创作经验，解答写作初学者的常见问题。</p>
                                <div class="list-item-meta">
                                    <span><i class="fas fa-calendar"></i> 6月20日 19:30</span>
                                    <span><i class="fas fa-user"></i> 567人报名</span>
                                </div>
                            </div>
                            <div class="list-item-action">
                                <button class="btn btn-sm btn-primary">报名</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧：线下活动 -->
                <div>
                    <h3 class="mb-3 text-secondary"><i class="fas fa-map-marker-alt"></i> 线下活动</h3>
                    <div class="list-layout">
                        <div class="list-item">
                            <img src="https://picsum.photos/seed/offline1/200/200" alt="线下聚会图片" class="list-item-image">
                            <div class="list-item-content">
                                <h3 class="list-item-title">城市摄影漫步：捕捉街头瞬间</h3>
                                <p class="list-item-desc">与摄影爱好者一起漫步城市街头，学习街头摄影技巧，交流拍摄经验。</p>
                                <div class="list-item-meta">
                                    <span><i class="fas fa-calendar"></i> 6月18日 14:00</span>
                                    <span><i class="fas fa-map-marker-alt"></i> 中央公园</span>
                                </div>
                            </div>
                            <div class="list-item-action">
                                <button class="btn btn-sm btn-primary">报名</button>
                            </div>
                        </div>
                        
                        <div class="list-item">
                            <img src="https://picsum.photos/seed/offline2/200/200" alt="线下工作坊图片" class="list-item-image">
                            <div class="list-item-content">
                                <h3 class="list-item-title">手工皮具制作体验课</h3>
                                <p class="list-item-desc">亲手制作一个小皮具，学习基础的皮具制作技巧，成品可带走。</p>
                                <div class="list-item-meta">
                                    <span><i class="fas fa-calendar"></i> 6月25日 10:00</span>
                                    <span><i class="fas fa-map-marker-alt"></i> 创意工坊</span>
                                </div>
                            </div>
                            <div class="list-item-action">
                                <button class="btn btn-sm btn-primary">报名</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 5. 标签云栏目 - 适合分类导航 -->
        <div class="secondary-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-tags"></i> 热门标签</h2>
                <div class="section-actions">
                    <a href="#" class="view-all">所有标签 <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            
            <div class="tags-cloud">
                <a href="#" class="tag-item">
                    <i class="fas fa-camera"></i> 摄影
                    <span class="tag-count">1.2k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-plane"></i> 旅行
                    <span class="tag-count">2.5k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-utensils"></i> 美食
                    <span class="tag-count">3.1k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-book"></i> 读书
                    <span class="tag-count">980</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-dumbbell"></i> 健身
                    <span class="tag-count">1.7k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-laptop-code"></i> 编程
                    <span class="tag-count">850</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-paint-brush"></i> 设计
                    <span class="tag-count">1.3k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-music"></i> 音乐
                    <span class="tag-count">2.1k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-film"></i> 电影
                    <span class="tag-count">1.8k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-gamepad"></i> 游戏
                    <span class="tag-count">2.3k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-leaf"></i> 环保
                    <span class="tag-count">760</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-briefcase"></i> 职场
                    <span class="tag-count">1.5k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-paw"></i> 宠物
                    <span class="tag-count">2.7k</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-home"></i> 家居
                    <span class="tag-count">920</span>
                </a>
                <a href="#" class="tag-item">
                    <i class="fas fa-pencil-alt"></i> 写作
                    <span class="tag-count">680</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 分类切换交互
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有active类
                    categoryItems.forEach(i => i.classList.remove('active'));
                    // 给当前点击项添加active类
                    this.classList.add('active');
                });
            });
            
            // 点赞按钮交互
            const likeButtons = document.querySelectorAll('.list-item-action .btn');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.classList.contains('btn-primary')) {
                        this.classList.remove('btn-primary');
                        this.classList.add('btn-success');
                        this.innerHTML = '<i class="fas fa-heart"></i> 已赞';
                    } else {
                        this.classList.remove('btn-success');
                        this.classList.add('btn-primary');
                        this.textContent = '点赞';
                    }
                });
            });
            
            // 报名按钮交互
            const registerButtons = document.querySelectorAll('.list-item-action .btn-primary');
            registerButtons.forEach(button => {
                if (button.textContent.trim() === '报名') {
                    button.addEventListener('click', function() {
                        this.textContent = '已报名';
                        this.classList.remove('btn-primary');
                        this.classList.add('btn-success');
                    });
                }
            });
        });
    </script>
</body>
</html>
    
